<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>canvas-to-tiff Index</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.dark.css">

	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">

</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top ">
		<div class="navbar-inner">
			<a class="brand" href="index.html">canvas-to-tiff</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="CanvasToTIFF.html">CanvasToTIFF</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					


	
	<span class="page-title">Index</span>
	
	












	
	





    <section class="readme-section">
        <article><h1>﻿canvas-to-tiff</h1><p>Converts a HTML5 canvas bitmap to a TIFF file (blob, data-uri, array)<br>that can be saved on user's computer or transferred to server.</p>
<p>The TIFF file is standard compliant (baseline) and support RGB + alpha channel.</p>
<h2>Features</h2><ul>
<li>Fast and small!</li>
<li>All operations are asynchronous and non-blocking</li>
<li>Supports alpha channel</li>
<li>Can convert Canvas to TIFF as ArrayBuffer</li>
<li>Can convert Canvas to TIFF as Blob</li>
<li>Can convert Canvas to TIFF as Data-URI</li>
<li>Saves in both big-endian (default) and little-endian (option) format</li>
<li>Arbitrary DPI for both X and Y directions can be set using options.</li>
<li>No dependencies</li>
<li>Documented source incl. HTML version (see docs/ folder)</li>
</ul>
<h2>Install</h2><p><strong>canvas-to-tiff</strong> can be installed in various ways:</p>
<ul>
<li>Bower: <code>bower install canvas-to-tiff</code></li>
<li>Git using HTTPS: <code>git clone https://github.com/epistemex/canvas-to-tiff.git</code></li>
<li>Git using SSH: <code>git clone git@github.com:epistemex/canvas-to-tiff.git</code></li>
<li>Download <a href="https://github.com/epistemex/canvas-to-tiff/archive/master.zip">zip archive</a> and extract.</li>
<li><a href="https://raw.githubusercontent.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js">canvastotiff.min.js</a></li>
</ul>
<h2>Usage</h2><p><strong>canvas-to-tiff</strong> is easy to use. Just include the script in header<br>or before the script section in your HTML file.</p>
<p>To convert the canvas to a TIFF file, call:</p>
<pre class="prettyprint source"><code>CanvasToTIFF.toDataURL(canvas, function(uri) {
    // uri is a Data-URI that can be used as source for images etc.
    // uri = &quot;data:image/tiff;base64, ...etc...&quot;;
});</code></pre><p>A faster option to Data-URIs is using Blobs:</p>
<pre class="prettyprint source"><code>CanvasToTIFF.toBlob(canvas, function(blob) {
    // blob object can be converted to an objectURL and then
    // set as source for images, or as download target:
    var url = URL.createObjectURL(blob);
});</code></pre><p>For convenience, a direct Canvas to ObjectURL method is included:</p>
<pre class="prettyprint source"><code>CanvasToTIFF.toObjectURL(canvas, function(url) {
    // can be used as source for image or download target
});</code></pre><p>To convert it to an ArrayBuffer that can be sent over the net:</p>
<pre class="prettyprint source"><code>CanvasToTIFF.toArrayBuffer(canvas, function(buffer) {
    // buffer is ArrayBuffer with the TIFF file
});</code></pre><p>Setting an error handler (before calling other operations):</p>
<pre class="prettyprint source"><code>CanvasToTIFF.setErrorHandler(myErrorHandlerFunc);</code></pre><p><strong>NOTE:</strong> As with with ordinary canvas, cross-origin resource sharing<br>(CORS) requirements must be fulfilled.</p>
<h2>Issues</h2><p>See the <a href="https://github.com/epistemex/canvas-to-tiff/issues">issue tracker</a> for details.</p>
<h2>License</h2><p>Released under <a href="http://choosealicense.com/licenses/mit/">MIT license</a>. You may use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.</p>
<p><em>&copy; Epistemex 2015-2016</em></p>
<p><img src="http://i.imgur.com/wZSsyt8.png" alt="Epistemex"></p></article>
    </section>







				</div>

				<div class="clearfix"></div>
				<footer>
					
					<p><b><a href='https://github.com/epistemex/'>Epistemex at GitHub</a></b></p>
					<br />
					
					
		<span class="copyright">
		Copyright &copy; 2015 Epistemex
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
		on Fri Jan 8th 2016 using the <a
			href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<!--<script src="scripts/sunlight.js"></script>-->
	<script src="scripts/docstrap.lib.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script>
		$( function () {
			$( "[id*='$']" ).each( function () {
				var $this = $( this );

				$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
			} );

			$( "#toc" ).toc( {
				anchorName  : function ( i, heading, prefix ) {
					return $( heading ).attr( "id" ) || ( prefix + i );
				},
				selectors   : "h1,h2,h3,h4",
				showAndHide : false,
				scrollTo    : "100px"
			} );

			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );
			$( '.dropdown-toggle' ).dropdown();
//			$( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" );

			$( ".tutorial-section pre, .readme-section pre" ).each( function () {
				var $this = $( this );

				var example = $this.find( "code" );
				exampleText = example.html();
				var lang = /{@lang (.*?)}/.exec( exampleText );
				if ( lang && lang[1] ) {
					exampleText = exampleText.replace( lang[0], "" );
					example.html( exampleText );
					lang = lang[1];
				} else {
					lang = "javascript";
				}

				if ( lang ) {

					$this
						.addClass( "sunlight-highlight-" + lang )
						.addClass( "linenums" )
						.html( example.html() );

				}
			} );

			Sunlight.highlightAll( {
				lineNumbers : false,
				showMenu : true,
				enableDoclinks : true
			} );
		} );
	 </script>



	<!--Navigation and Symbol Display-->
	


	<!--Google Analytics-->
	

</body>
</html>